<template>
	<div id="app">
		<div ref="threedemo">

		</div>
	</div>
</template>

<script>
	const THREE = require('three');
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
	export default {
		name: 'App',
		data() {
			return {
				scene: null, //场景
				camera: null, //摄像机
				render: null, //渲染器
				controls: null, //鼠标控制
			};
		},
		mounted() {
			this.init();
			this.initImg();
			this.animate();
		},
		methods: {
			// 初始化THREE需要的场景
			init() {
				this.scene = new THREE.Scene();
				this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
				this.render = new THREE.WebGLRenderer({

					antialias: true
				});
				this.render.setPixelRatio(window.devicePixelRatio); //设置设备像素比。通常用于避免HiDPI设备上绘图模糊
				this.render.setSize(window.innerWidth, window.innerHeight) //设置THREE场景大小为整个页面
				var app = this.$refs.threedemo;
				app.appendChild(this.render.domElement); //添加场景到DOM中
				this.camera.position.set(200, 0, 0); //摄像头摆放位置
				this.controls = new OrbitControls(this.camera, this.render.domElement); //创建控件对象
			},
			initImg() {
				// 创建场景贴图
				this.scene.background = new THREE.CubeTextureLoader()
					.setPath('http://localhost:3000/static/uploads/')
					.load(['w04.png', 'w05.png', 'w06.png', 'w02.png', 'w01.png', 'w03.png']);
			},
			animate() {
				this.controls.update();
				this.render.render(this.scene, this.camera);
				window.requestAnimationFrame(this.animate);
			}
		}
	}
</script>

<style>
	#app {
		height: 900px;
		/* font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px; */
	}
</style>
